import React, {PureComponent} from 'react';
import {screenWidth} from "../../utils/StylesUtils";
import * as colors from "../../utils/ColorUtils";
import {Actions} from 'react-native-router-flux';
import {
    TouchableOpacity,
    Image, Text, View,
    StyleSheet
} from 'react-native';

export default class ArticleitemView extends PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        const {item} = this.props.item;
        return (
            <TouchableOpacity style={{flex: 1}}
                                onPress={() => Actions.ArticleDetailPage({title: item.title, link: item.link})}>
                <View style={stylesList.container}>
                    <View style={stylesList.container_01}>
                        <Image style={stylesList.logo} source={{uri: 'ic_launcher_round'}}/>
                        <Text style={stylesList.author} ellipsizeMode='tail' numberOfLines={1}>{item.author}</Text>
                        <Text style={stylesList.time} numberOfLines={1}>{item.niceDate}</Text>
                    </View>
                    <View style={stylesList.container_02}>
                        <Text style={stylesList.title} ellipsizeMode='tail' numberOfLines={1}>{item.title}</Text>
                    </View>
                    <View style={stylesList.container_03}>
                        <Text style={stylesList.type} ellipsizeMode='tail'
                              numberOfLines={1}>{"分类：" + item.superChapterName + "/" + item.chapterName}</Text>
                        <Image style={stylesList.collect} source={{uri: 'icon_collection_0'}}/>
                    </View>
                </View></TouchableOpacity>
        )
    }
}

const stylesList = StyleSheet.create({
    container: {
        height: 100,
        width: screenWidth - 20,
        borderRadius: 5,
        backgroundColor: colors.white,
        margin: 10,
        marginBottom: 0,
        flexDirection: "column",
        alignItems: "center"
    },
    container_01: {
        width: screenWidth - 40,
        height: 35,
        flexDirection: 'row',
        alignItems: "center",
    },
    container_02: {
        width: screenWidth - 40,
        height: 35,
        marginLeft: 10,
        marginRight: 10,
        flexDirection: 'row',
        alignItems: "center",
    },
    container_03: {
        width: screenWidth - 40, flex: 1,
        marginLeft: 10,
        marginRight: 10,
        flexDirection: 'row',
        alignItems: "center",
    },
    logo: {width: 20, height: 20},
    author: {
        flex: 1,
        fontSize: 13,
        marginLeft: 5,
        color: colors.txt_6
    },
    time: {
        fontSize: 12, marginLeft: 5,
        color: colors.txt_6,
        alignItems: 'flex-end',
        flexDirection: 'row',
        textAlign: 'right',
        justifyContent: 'flex-end'
    },
    title: {
        fontSize: 14,
        color: colors.txt_6
    },
    type: {
        flex: 1,
        fontSize: 13,
        color: colors.txt_8
    },
    collect: {width: 23, height: 20, marginLeft: 10},
});